@media screen and (min-width: 1501px) {
	#combatContainer {
		position: absolute;
		top:50%;
		left:50%;		
		width:180px;
		height:120px;
		margin-left:-90px;
		margin-top:0px;
		z-index:10;
		opacity:1.0;
		display:none;
		transform:scale(1.5);
	}
	#combatContainer * {
		width:48px;
		height:48px;		
		font-family: 'GraphicPixel';
		color:#000;		
		font-size:24px;
		font-weight:bold;
		text-align: center;
		line-height:44px;
		pointer-events:all;
		opacity: 0.45;
		border-radius:12px;
		border:3px solid black;
	}
	#currentSkill {
		position: absolute;
		top:60px;
		left:60px;		
		width:48px;
		height:48px;
		background: url('../img/3/skillicons.png') no-repeat;
		opacity:0.75;
		display:none;
		border-radius:12px;
		border:3px solid black;
	}


	#attackContainer {
		position: absolute;
		bottom:3%;
		right:0;		
		width:117px;
		height:400px;
		font-family: 'GraphicPixel';
		color:#fff;
		opacity:0.6;
	}
	#attackContainer {
		border-radius: 10% / 5% !important;
	}
	#attackContainer:before {
		border-radius: 10% / 5% !important;
	}
    
	#attackOffset {
		position:absolute;
		left: 2%;
		right: 2%;
		top: 2%;
		bottom: 2%;
		width: 96%;
		height: 96%;
		background-image: url('../img/3/shortcutbar.png');
		background-repeat: no-repeat;
		background-position: 0 20px;
	}
	
     #labelPotions {
     	position: absolute;
     	top:0;
     	font-size:18px;
     	font-weight:bold;
     	width:160px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     #labelSkills {
     	position: absolute;
     	top:171px;
     	font-size:18px;
     	font-weight:bold;
     	width:160px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     
     #scinventorybackground0,  #scinventorybackground1,  #scinventorybackground2,  #scinventorybackground3 {
        position:absolute;
     	width:80px;
        height:80px;
        top: 20px;
        left: 0;
        pointer-events:all;
        cursor: hand;
    }

     #scinventorybackground0 {
     	top: 102px;
		left: 0px;
	 }
     #scinventorybackground1 {
     	top: 102px;
		left: 80px;
	 }
     #scinventorybackground2 { 
     	top: 21px;
		left: 0px;
	 }
     #scinventorybackground3 {
     	top: 21px;
		left: 80px;
	 }

     #scinventory0,  #scinventory1,  #scinventory2,  #scinventory3 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat !important;
        text-align: center;
        line-height:42px;
        color: #fff;
        /*border:1px solid #0f0;*/
        font-family: 'GraphicPixel';        
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;      
    }
	
    #scinventory0Cooltime,  #scinventory1Cooltime,  #scinventory2Cooltime,  #scinventory3Cooltime {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 70px;
        height: 70px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 21px;
        color: white;
        cursor: default;
        display: none;
        border-radius:5px;
        font-family: 'GraphicPixel';
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }	

	#attackContainer .frame-close-button {
		position: absolute;
		right:2px;
		top:2px;
		width:32px;
		height:32px;
		background-size: 32px 32px;
	}	
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
	#combatContainer {
		position: absolute;
		top:50%;
		left:50%;		
		width:120px;
		height:80px;
		margin-left:-60px;
		margin-top:0px;
		z-index:10;
		opacity:1.0;
		display:none;
		transform:scale(1.5);
	}
	#combatContainer * {
		width:32px;
		height:32px;		
		font-family: 'GraphicPixel';
		color:#000;		
		font-size:16px;
		font-weight:bold;
		text-align: center;
		line-height:30px;
		pointer-events:all;
		opacity: 0.45;
		border-radius:8px;
		border:2px solid black;
	}
	#currentSkill {
		position: absolute;
		top:40px;
		left:40px;		
		width:32px;
		height:32px;
		background: url('../img/2/skillicons.png') no-repeat;
		opacity:0.75;
		display:none;
		border-radius:8px;
		border:2px solid black;
	}


	#attackContainer {
		position: absolute;
		bottom:3%;
		right:0;		
		width:77px;
		height:264px;
		font-family: 'GraphicPixel';
		color:#fff;
		opacity:0.6;
	}
	#attackContainer {
		border-radius: 10% / 5% !important;
	}
	#attackContainer:before {
		border-radius: 10% / 5% !important;
	}
    
	#attackOffset {
		position:absolute;
		left: 2%;
		right: 2%;
		top: 2%;
		bottom: 2%;
		width: 96%;
		height: 96%;
		background-image: url('../img/2/shortcutbar.png');
		background-repeat: no-repeat;
		background-position: 0 13px;
	}
	
     #labelPotions {
     	position: absolute;
     	top:0;
     	font-size:12px;
     	font-weight:bold;
     	width:106px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     #labelSkills {
     	position: absolute;
     	top:113px;
     	font-size:12px;
     	font-weight:bold;
     	width:106px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     
     #scinventorybackground0,  #scinventorybackground1,  #scinventorybackground2,  #scinventorybackground3 {
        position:absolute;
     	width:54px;
        height:54px;
        top: 13px;
        left: 0;
        pointer-events:all;
        cursor: hand;
    }

     #scinventorybackground0 {
     	top: 67px;
		left: 0px;
	 }
     #scinventorybackground1 {
     	top: 67px;
		left: 52px;
	 }
     #scinventorybackground2 { 
     	top: 14px;
		left: 0px;
	 }
     #scinventorybackground3 {
     	top: 14px;
		left: 52px;
	 }

     #scinventory0,  #scinventory1,  #scinventory2,  #scinventory3 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 48px;
        height: 48px;
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat !important;
        text-align: center;
        line-height:28px;
        color: #fff;
        /*border:1px solid #0f0;*/
        font-family: 'GraphicPixel';        
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;      
    }
	
    #scinventory0Cooltime,  #scinventory1Cooltime,  #scinventory2Cooltime,  #scinventory3Cooltime {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 48px;
        height: 48px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 14px;
        color: white;
        cursor: default;
        display: none;
        border-radius:6px;
        font-family: 'GraphicPixel';
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
	
	#attackContainer .frame-close-button {
		position: absolute;
		right:4px;
		top:4px;
		width:16px;
		height:16px;
		background-size: 16px 16px;
	}
}


@media screen and (max-width: 1000px) {
	#combatContainer {
		position: absolute;
		top:50%;
		left:50%;		
		width:60px;
		height:40px;
		margin-left:-30px;
		margin-top:0px;
		z-index:10;
		opacity:1.0;
		display:none;
		transform:scale(1.5);
	}
	#combatContainer * {
		width:16px;
		height:16px;		
		font-family: 'GraphicPixel';
		color:#000;		
		font-size:8px;
		font-weight:bold;
		text-align: center;
		line-height:15px;
		pointer-events:all;
		opacity: 0.45;
		border-radius:4px;
		border:1px solid black;
	}
	#currentSkill {
		position: absolute;
		top:20px;
		left:20px;		
		width:16px;
		height:16px;
		background: url('../img/1/skillicons.png') no-repeat;
		opacity:0.75;
		display:none;
		border-radius:4px;
		border:1px solid black;
	}


	#attackContainer {
		position: absolute;
		bottom:1.5%;
		right:0;		
		width:40px;
		height:132px;
		font-family: 'GraphicPixel';
		color:#fff;
		opacity:0.6;
	}
	#attackContainer {
		border-radius: 10% / 5% !important;
	}
	#attackContainer:before {
		border-radius: 10% / 5% !important;
	}
    
	#attackOffset {
		position:absolute;
		left: 2%;
		right: 2%;
		top: 2%;
		bottom: 2%;
		width: 96%;
		height: 96%;
		background-image: url('../img/1/shortcutbar.png');
		background-repeat: no-repeat;
		background-position: 0 6px;
	}
	
     #labelPotions {
     	position: absolute;
     	top:0;
     	font-size:6px;
     	font-weight:bold;
     	width:53px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     #labelSkills {
     	position: absolute;
     	top:58px;
     	font-size:6px;
     	font-weight:bold;
     	width:53px;
     	text-align:center;
     	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     }
     
     #scinventorybackground0,  #scinventorybackground1,  #scinventorybackground2,  #scinventorybackground3 {
        position:absolute;
     	width:27px;
        height:27px;
        top: 6px;
        left: 0;
        pointer-events:all;
        cursor: hand;
    }

     #scinventorybackground0 {
     	top: 33px;
		left: 0px;
	 }
     #scinventorybackground1 {
     	top: 33px;
		left: 26px;
	 }
     #scinventorybackground2 { 
     	top: 7px;
		left: 0px;
	 }
     #scinventorybackground3 {
     	top: 7px;
		left: 26px;
	 }

     #scinventory0,  #scinventory1,  #scinventory2,  #scinventory3 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat !important;
        text-align: center;
        line-height:14px;
        color: #fff;
        /*border:1px solid #0f0;*/
        font-family: 'GraphicPixel';        
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;      
    }
	
    #scinventory0Cooltime,  #scinventory1Cooltime,  #scinventory2Cooltime,  #scinventory3Cooltime {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 24px;
        height: 24px;
        background-color: rgba(255, 0, 0, 0.5);
        text-align: center;
        font-size: 7px;
        color: white;
        cursor: default;
        display: none;
        border-radius:4px;
        font-family: 'GraphicPixel';
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }

	
	#attackContainer .frame-close-button {
		position: absolute;
		right:2px;
		top:2px;
		width:8px;
		height:8px;
		background-size: 8px 8px;
	}
}
